import WEditor from 'wangeditor'
import store from '@/store/'

class ImageMenu extends WEditor.DropListMenu {
  constructor (editor) {
      const $elem = WEditor.$('<div class="w-e-menu" data-title="图片"><i class="w-e-icon-image"></i></div>')

      // droplist 配置
      const dropListConf = {
          width: 100,
          title: '插入图片',
          type: 'list',
          list: [
            { $elem: WEditor.$('<p>上传图片</p>'), value: 'uploadImage' },
            { $elem: WEditor.$('<p>网络图片</p>'), value: 'webImage' }
          ],
          clickHandler: (value) => {
              this.command(value, editor.id)
              console.log("🚀 ~ file: ImageMenuRegister.js ~ line 19 ~ ImageMenu ~ constructor ~ editor.id", editor.id)
          }
      }

      super($elem, editor, dropListConf)
  }

  command (value, id) {
      if (value === 'uploadImage') {
        store.dispatch('showStorageSelect', id)
      }
      if (value === 'webImage') {
        store.dispatch('showWwwImgModal')
      }
  }

  // 菜单是否需要激活
  tryChangeActive () {}
}

WEditor.registerMenu('selectImage', ImageMenu)
